@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	box-sizing:border-box;

}
ul,ol,li{
	list-style: none;
}
 img {
 	border:none; 
 	vertical-align: middle;
 }
body { 
	color:#333; 
	font:.32rem/1.5 PingFangSC-Light,helvetica,'Heiti SC';
	background-color:#f4f4f4;
}
a { 
	color:#333; 
	text-decoration:none;
	cursor: pointer;
}

.wh(@w:100%;@h:100%){
	width:@w;
	height:@h;
}

.h_hd{
	height: 87px;
	border-bottom: 1px solid #eaeaea;
	box-sizing:border-box;
	position: fixed;
	z-index: 10;
	background-color: #fafafa;

}
.h_topBar{
	.wh(10rem;1.17333rem);
	padding: 0 .21333rem 0 .32rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	.h_hc{
		.wh(.66667rem;.66667rem);
		display: inline-block;
		background: url(../images/bit.png) no-repeat 0 -3.38667rem;
		background-size: 2.29333rem 9.28rem;
		
		vertical-align: middle;
		margin-top: .253333rem;
	}
	.logo{
		.wh(2.29333rem;.72rem);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		display: inline-block;
		vertical-align: middle;
		background: url(../images/bit.png) no-repeat 0 -2.53333rem;
		background-size: 2.29333rem 9.28rem; 
	}
	.right{
		.wh(1.97292rem;.8533333rem);
		margin-left: auto;
		margin-right: .06667rem;
		float: right;
		margin-top: .16rem;
		.search{
			display: inline-block; 
			.search_bg{
				position: relative;
				bottom: -.02667rem;
				display: inline-block;
				vertical-align: middle;
				background: url(../images/bit.png) no-repeat 0 -7.65333rem;
				background-size: 2.29333rem 9.28rem;
				width: .85333rem;
				height: .85333rem;
			}
		}
		.cart{
			float: right;
			.cart_bg{
				.wh(.85333rem;.85333rem);
				position: relative;
				display: inline-block;
				vertical-align: middle;
				background: url(../images/bit.png) no-repeat 0 0;
				background-size: 2.29333rem 9.28rem;
				display: inline-block;
				.cartNum{
					.wh(.37333rem;.37333rem);
					display: inline-block;
					position: absolute;
					top: .04rem;
					right: -.08rem;
					border-radius: 50%;
					background-color: #b4282d;
					text-align: center;
					line-height: .37333rem;
					font-size: .24rem;
					color:#fff;
					font-style: normal;
				}	
			}
		}
	}
}
.h_meun{
	.wh(100%;1.586266rem);
	position:absolute;
	top:87px;
	left:0;
	background-color:#fafafa;
	text-align:center;
	border-bottom: 1px solid #eaeaea;
	z-index: 200;
	ul{
		.wh(7.36rem;80px;);
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		li{
			.wh(.64rem,80px);
			float:left;
			margin-right:1.6rem;
			text-align:center;
			&:last-of-type{
			     margin-right: 0;
			}
			a{	
				.wh(100%;100%);
				display:inline-block;
				i{
					.wh(.64rem;.64rem);
					display:block;
					margin-bottom:.10667rem;
					vertical-align: middle;
				}
				span{
				    .wh(.64rem;.32rem);
				    display: block;
				    color:#666;
				    font-size:.32rem;
				    line-height:1;
				}

			}

		}

	}
}

.h_item:nth-of-type(1) .item_img{
  background: url(../images/bit.png) no-repeat 0 -1.76rem;
  background-size: 2.29333rem 9.28rem;
}
.h_item:nth-of-type(2) .item_img {
  background: url(../images/bit.png) no-repeat 0 -8.64rem;
  background-size: 2.29333rem 9.28rem;
}
.h_item:nth-of-type(3) .item_img{
  background: url(../images/bit.png) no-repeat 0 -0.98667rem;
  background-size: 2.29333rem 9.28rem;
}
.h_item:nth-of-type(4) .item_img{
  background: url(../images/bit.png) no-repeat 0 -6.88rem;
  background-size: 2.29333rem 9.28rem;
}

#main{
    overflow-y: auto;
    overflow-x:hidden;
    height: 100vh;
    padding-top:87px;
}

#toTop{
    position:fixed;
    display: block;
    right:.30667rem;
    bottom: 1.33333rem;
    vertical-align: middle;
    .wh(1.09333rem;1.09333rem);
    z-index: 500;
    background: url("../images/top.png") no-repeat;
    background-size: 100% 100%;
    
}
